#{extends '/include/main.html' /}
<div class="form-page">
	<h2 class="form-title">用户URL映射关系</h2>
	<select id="user-select">
		<option value="">请选择用户</option>
		#{list items : users, as : "user"}
			<option value="${user.id}">${user.name}</option>
		#{/list}
	</select>
	#{if urls.size() > 0}
		<h4>应用选择</h4>
		<ul id="url-checkboxs">
			#{list items : urls, as : "url"}
				<li>${url.name}<input type="checkbox" value="${url.id}"/></li>
			#{/list}
			<li><input type="button" value="提交" class="form-submit-zone-submit-button" id="form-submit-zone-submit-button"/></li>
		</ul>
	#{/if}
	#{else}
		<div class="empty-content">没有url,请先创建它</div>
	#{/else}
</div>
<script>
	$(function() {
		// select user Urls
		$("#user-select").change(function() {
			if (this.value == "") {
				return;
			}
			$.ajax({
				url : "@@{AdminController.getSelectdUrls()}",
				data : {
					userId : this.value
				},
				success : function(userUrls) {
					if (!userUrls) {
						return;
					}
					$("#url-checkboxs").find("[type=checkbox]").attr("checked", "");
					for (var i = 0, ii = userUrls.length; i < ii; i++) {
						$("#url-checkboxs").find("input[value='" + userUrls[i].urlId +"']").attr("checked", "checked");
					}
					
				}
			});
		});
		//if not select user, stop select url
		$("#url-checkboxs").find("[type=checkbox]").click(function() {
			if (!$("#user-select").val()) {
				alert("请选择用户");
				return false;
			}
		});

		$("#form-submit-zone-submit-button").click(function() {
			var userId = $("#user-select").val()
			if (!userId) {
				alert("请选择用户");
				return;
			}
			var selectedUrls = [];
			$("#url-checkboxs").find("input:checked").each(function() {
				selectedUrls.push(this.value);
			});
			if (selectedUrls.length == 0) {
				alert("请选择应用");
				return;
			}
			$.ajax({
				url : "@@{AdminController.saveSelectedUrls}",
				data : {
					selectedUrls : selectedUrls,
					userId : userId
				},
				type : "put",
				success : function() {
					alert("修改成功");
				}
			});
		});
		
	});
</script>